import 'package:flutter/material.dart';
import 'package:logger/logger.dart';

class ImageIconRoute extends StatefulWidget {
  const ImageIconRoute({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => _ImageIconRouteState();
}

class _ImageIconRouteState extends State<ImageIconRoute> {
  final logger = Logger(printer: PrettyPrinter());

  @override
  Widget build(BuildContext context) {
    const img = AssetImage("assets/images/cake.png");
    return Scaffold(
      appBar: AppBar(
        title: const Text("图片及ICON"),
      ),
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: <Widget>[
              const Image(
                  image: AssetImage("assets/images/01e6e1f2.jpg"), width: 300),
              SizedBox.fromSize(size: const Size.fromHeight(20)),
              Image.asset("assets/images/01e6e1f2.jpg", width: 300),
              SizedBox.fromSize(size: const Size.fromHeight(20)),
              const Image(
                  image: NetworkImage(
                      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
                  width: 300),
              SizedBox.fromSize(size: const Size.fromHeight(20)),
              Image.network(
                  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
                  width: 300),
              SizedBox.fromSize(size: const Size.fromHeight(20)),
              const Text(
                "图片的裁剪",
                style: TextStyle(fontSize: 32.0),
              ),
              // fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
              const Image(
                image: img,
                height: 50.0,
                width: 100.0,
                fit: BoxFit.fill,
              ),

              // cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
              const Image(
                  image: img, height: 50.0, width: 100.0, fit: BoxFit.cover),

              // contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
              const Image(
                  image: img, height: 50.0, width: 100.0, fit: BoxFit.contain),

              // fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
              const Image(
                  image: img, height: 50.0, width: 100.0, fit: BoxFit.fitWidth),

              // fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
              const Image(
                  image: img,
                  height: 50.0,
                  width: 100.0,
                  fit: BoxFit.fitHeight),

              // none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
              const Image(
                  image: img, height: 50.0, width: 100.0, fit: BoxFit.none),
              SizedBox.fromSize(size: const Size.fromHeight(20)),

              const Image(
                image: AssetImage("assets/images/my_studies.png"),
                width: 100.0,
                color: Colors.blue,
                colorBlendMode: BlendMode.difference,
              ),
              SizedBox.fromSize(size: const Size.fromHeight(20)),

              const Image(
                image: AssetImage("assets/images/my_studies.png"),
                width: 150.0,
                height: 100.0,
                repeat: ImageRepeat.repeatX,
              ),

              SizedBox.fromSize(size: const Size.fromHeight(20)),
              const Text(
                "Icon",
                style: TextStyle(fontSize: 32.0),
              ),

              DefaultTextStyle(
                style: const TextStyle(
                    fontFamily: "MaterialIcons",
                    fontSize: 48.0,
                    color: Colors.green),
                child: Row(children: const [
                  Text(
                    "\uE03e",
                  ),
                  Text(
                    "\uE237",
                  ),
                  Text(
                    "\uE287",
                  ),
                ]),
              ),

              SizedBox.fromSize(size: const Size.fromHeight(20)),

              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: const <Widget>[
                  Icon(
                    IconData(0xee7e, fontFamily: 'iconfont'),
                    size: 48.0,
                  ),
                  Icon(
                    IconData(0xee82, fontFamily: 'iconfont'),
                    size: 48.0,
                  ),
                ],
              ),

              SizedBox.fromSize(size: const Size.fromHeight(20)),
            ],
          ),
        ),
      ),
    );
  }
}
